<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../font/iconfont.css"> -->

    <style>
        .createCode {
            user-select: none;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- 阻止表单默认提交  -> JS提交(自己设置验证规则 => 全都成功之后在提交) -->
    <form class="box" onsubmit="return false">
        <p>
            <label for="">用户名:</label>
            <input type="text" class="user">
            <span class="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" class="pwd">
            <span class="pwd_span"></span>
        </p>
        <p>
            <label for="">手机号:</label>
            <input type="text" class="phone">
            <span class="phone_span"></span>
        </p>
        <p>
            <label for="">邮&emsp;箱:</label>
            <input type="text" class="email">
            <span class="email_span"></span>
        </p>
        <p>
            <label for="">验证码:</label>
            <input type="text" class="code">
            <button class="createCode">a5b6</button>
            <span class="code_span"></span>
        </p>
        <p>
            <input class="btn" type="submit" value="注册">
        </p>
    </form>
</body>
<script>
    // 用户名
    // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头 (一步到位)

    // 从易到难的顺序(拆分判断)
    // a. 长度  6-12位
    // b. 不能以数字开头  
    // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)


    // 密码
    // 由数字 大小写字母 _ $ 组成   6-12位

    // 判断密码强度
    // 数字,大写,小写,特殊字符  中 只出现一种   11111   aaaaaa  AAAAAA   弱
    // 数字,大写,小写,特殊字符  中 出现2种      11111a  a1111   aAAAAA   中
    // 数字,大写,小写,特殊字符  中 出现3种      1aA     1Aa   A1a        强
    // 数字,大写,小写,特殊字符  中 出现4种      1aA_                     超强

    // 是否存在数字  / 大写 /小写 / 特殊字符

    // true + true + true + false  => 3

    // 手机号

    
    // 邮箱

    // !! 验证码:      ["a","b","c","d","e","f","g","h"]  => 从数组中随机四个字符形成验证码 (升级版: 不允许出现重复字符) 



    // 要求:
    // 1. 失焦时对 用户名 密码 手机号 邮箱 验证码 进行验证
    // 2. 用户名 密码 手机号 邮箱 全都正确的前提下  => 点击注册 弹出可以注册

</script>
<script>
    var userInp = document.getElementsByClassName("user")[0];
    var userSpan = document.getElementsByClassName("user_span")[0];

    var pwdInp = document.getElementsByClassName("pwd")[0];
    var pwdSpan = document.getElementsByClassName("pwd_span")[0];
    
    var phoneInp = document.getElementsByClassName("phone")[0];
    var phoneSpan = document.getElementsByClassName("phone_span")[0];
    
    var emailInp = document.getElementsByClassName("email")[0];
    var emailSpan = document.getElementsByClassName("email_span")[0];

    var codeInp = document.getElementsByClassName("code")[0];
    var codeSpan = document.getElementsByClassName("code_span")[0];

    var createCode = document.getElementsByClassName("createCode")[0];
    
    var btn = document.getElementsByClassName("btn")[0];

    
    var isUserOk = false;
    var isPwdOk = false;
    var isPhoneOk = false;
    var isEmailOk = false;
    
    // 随机四位验证码  => 放到createCode 按钮中
    
    var list = ["a","b","c","d","e","f","g","h"];

    // 1. 数组是通过下标取值的 => 随机验证码 => 随机下标

    // 字符可以重复
    // var codeStr = "";
    // for(var i = 0;i< 4;i++){
    //     var index = Math.floor(Math.random()*list.length);
    //     var char = list[index];
    //     codeStr += char;  // 无脑拼接
    // }
    // console.log(codeStr);

    // 字符不允许重复     => 前面放过就不允许在放了 => 每次拼接之前,先判断随机的字符在codeStr中是否存在
    // var codeStr = "";  // 验证码
    // for(var i = 0;i< 4;i++){   // 假设i=1时 随机的字符重复
    //     var index = Math.floor(Math.random()*list.length);
    //     var char = list[index];
    //     if(!codeStr.includes(char)){  // 验证码中不存在的字符
    //         codeStr += char;
    //     }else{  // 已存在  => 不做任何操作的话就会少一个字符
    //         console.log(char+"已存在");
    //         i--;  // 本次不算  再来一次   =>  i-- =>  i = 0 本次循环结束 i++ => i=1
    //     }
    // }
    // console.log(codeStr);


    var codeStr = "";  // 验证码
    var count = 4;
    for(var i = 0;i < count;i++){   // 假设i=1时 随机的字符重复
        var index = Math.floor(Math.random()*list.length);
        var char = list[index];
        if(!codeStr.includes(char)){  // 验证码中不存在的字符
            codeStr += char;
        }else{  // 已存在  => 不做任何操作的话就会少一个字符
            console.log(char+"已存在");
            count ++;  // 本次也算  但是再送你一次
        }
    }
    console.log(codeStr);

    createCode.textContent = codeStr;

    createCode.onclick = function(){
        var codeStr = "";  // 验证码
        var count = 4;
        for(var i = 0;i < count;i++){   // 假设i=1时 随机的字符重复
            var index = Math.floor(Math.random()*list.length);
            var char = list[index];
            if(!codeStr.includes(char)){  // 验证码中不存在的字符
                codeStr += char;
            }else{  // 已存在  => 不做任何操作的话就会少一个字符
                console.log(char+"已存在");
                count ++;  // 本次也算  但是再送你一次
            }
        }
        console.log(codeStr);

        createCode.textContent = codeStr;
    }





    // 用户名
    // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头 (一步到位)
    /* userInp.onblur = function(){
        var user = userInp.value.trim();
        console.log(user);
        userInp.value = user;

        var reg = /^[a-zA-Z_$][\w$]{5,11}$/;

        if(reg.test(user)){
            userSpan.textContent = "√";   

            // 如果同时添加内联样式较多 => 可以先将样式提取为一个class中,添加class名即可
            // userSpan.style.color = "green"; 
            // userSpan.style.fontSize = "12px"; 

            // class名切换的问题
            // userSpan.classList.remove("error");
            // userSpan.classList.add("right");

            // 
            userSpan.className = "user_span right";
        }else{
            userSpan.textContent = "由数字、大小写字母、_、$组成,6-12位,且不能以数字开头";    
            // userSpan.style.color = "red"; 
            // userSpan.style.fontSize = "12px"; 
            
            // userSpan.classList.remove("right");
            // userSpan.classList.add("error");

            userSpan.className = "user_span error";
        }
    } */

    // 用户名   
    // 由数字 大小写字母 _ $ 组成 , 6-12位,且不能以数字开头 (一步到位)
    // 从易到难的顺序(拆分判断)
    // a. 长度  6-12位
    // b. 不能以数字开头  
    // c. 由数字 大小写字母 _ $ 组成  (所有的字符都必须在合法字符的范围内,只要有一个不是合法的字符 报错   => 判断字符串中是否能含有非法字符)
    userInp.onblur = function(){
        var user = userInp.value.trim();
        userInp.value = user;

        isUserOk = false;  // 每次失焦 先重置状态为false => 在重新验证

        var lenReg = /^\S{6,12}$/; // 长度验证规则
        var startReg = /^[^0-9]/;  // 非数字开头

        var combReg = /^[\w$]{6,12}$/;  // 包含 字母 数字 下划线 $ (6-12位) =>  所有的字符都必须在合法字符的范围内 不允许出现规则以外的内容
        var illegalReg = /[^\w$]/;  // 是否存在非法字符  => 只要有一个非法的 即失败 


        if(lenReg.test(user)){   // 长度验证

            if(startReg.test(user)){ // 非数字开头
                userSpan.textContent = "√";   
                userSpan.className = "user_span right";

                // if(combReg.test(user)){ // 组成 => 所有的都是合法的
                //     userSpan.textContent = "√";   
                //     userSpan.className = "user_span right";
                // }else{
                //     userSpan.textContent = "用户名由数字 字母 下换线 $组成";    
                //     userSpan.className = "user_span error";
                // }

                // illegalReg.test(user) === false
                if(!illegalReg.test(user)){ // 不存在非法字符
                    userSpan.textContent = "√";   
                    userSpan.className = "user_span right";

                    isUserOk = true;
                }else{
                    userSpan.textContent = "用户名由数字 字母 下换线 $组成";    
                    userSpan.className = "user_span error";
                }

            }else{
                userSpan.textContent = "用户名不能以数字开头";    
                userSpan.className = "user_span error";
            }

        }else{
            userSpan.textContent = "用户名需要在6-12位之间";    
            userSpan.className = "user_span error";
        }
    } 




    pwdInp.onblur = function(){
        var pwd = pwdInp.value;
        var reg = /^[\w$]{6,12}$/;

        isPwdOk = false;

        if(reg.test(pwd)){  // 密码格式正确
            

            // 判断密码强度
            // 数字 大写 小写  特殊字符(_ $) 四者中出现几种 
            // 1种 弱
            // 2种 中
            // 3种 强
            // 4种 超强

            var isExistNum = /[0-9]/.test(pwd);
            var isExistBig = /[A-Z]/.test(pwd);
            var isExistSmall = /[a-z]/.test(pwd);
            var isExistSpe = /[_$]/.test(pwd);

            var level = isExistNum + isExistBig + isExistSmall + isExistSpe;
            console.log(level);

            switch(level){
                case 1: pwdSpan.textContent="弱"; break;
                case 2: pwdSpan.textContent="中"; break;
                case 3: pwdSpan.textContent="强"; break;
                case 4: pwdSpan.textContent="超强"; break;
            }

            // pwdSpan.textContent = "√";   
            pwdSpan.className = "pwd_span right";

            isPwdOk = true;
        }else{
            pwdSpan.textContent = "由数字、大小写字母、_、$组成,6-12位";    
            pwdSpan.className = "pwd_span error";
        }
    }


    phoneInp.onblur = function(){
        var phone = phoneInp.value.trim();
        var reg = /^1[3-9]\w{9}$/;
        
        isPhoneOk = false;

        if(reg.test(phone)){ 
            phoneSpan.textContent = "√";   
            phoneSpan.className = "phone_span right";
            isPhoneOk = true;
        }else{
            phoneSpan.textContent = "请输入正确的手机号";    
            phoneSpan.className = "phone_span error";
        }
    }

    emailInp.onblur = function(){
        var email = emailInp.value.trim();
        var reg = /^\w+@\w+\.\w+$/;
        isEmailOk = false;
        
        if(reg.test(email)){ 
            emailSpan.textContent = "√";   
            emailSpan.className = "email_span right";
            isEmailOk = true;
        }else{
            emailSpan.textContent = "请输入正确的邮箱";    
            emailSpan.className = "email_span error";
        }
    }


    btn.onclick = function(){
        // if(isUserOk && isPwdOk && isPhoneOk && isEmailOk){
        //     alert("可以注册");
        // }else{
        //     alert("请填入正确信息");
        // }

        if(!isUserOk){ // isUserOk == false
            alert("用户名有误,请先修改用户名");
        }else if(!isPwdOk){
            alert("密码有误,请先修改用户名");
        }else if(!isPhoneOk){
            alert("手机好有误,请先修改用户名");
        }else if(!isEmailOk){
            alert("邮箱有误,请先修改用户名");
        }else{
            alert("可以注册");
        }
    }
</script>

</html>